import { forwardRef, useImperativeHandle, useRef } from 'react'

import {
  AssociationData,
  SwitchAndIntervalRef
} from '../../BigScreenBase/interface'
import SafeIndexDownRanking from './SafeIndexDownRanking'
import SafeIndexLiftRanking from './SafeIndexLiftRanking'
import StubbornMiasmaRanking from './StubbornMiasmaRanking'

export type RightProps = {
  selectedAssociationItem: AssociationData
}

const Right = forwardRef<SwitchAndIntervalRef, RightProps>((props, ref) => {
  const {
    selectedAssociationItem: { key: entId }
  } = props
  const DistrictRanCompRef = useRef<SwitchAndIntervalRef>(null)

  useImperativeHandle(ref, () => ({
    switchAssociation: (newAssociationId) => {},
    intervalRefresh: () => {}
  }))

  return (
    <div style={{ display: 'flex', flexDirection: 'column', rowGap: 24 }}>
      <SafeIndexLiftRanking entId={entId} />
      <SafeIndexDownRanking entId={entId} />
      <StubbornMiasmaRanking entId={entId} />
    </div>
  )
})

export default Right
